﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
  
    <style type="text/css" >
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
    </style>
    <script type="text/javascript">var djConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3"></script>
    <script type="text/javascript">
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("esri.arcgis.utils");

        var map;

        function init() {
            //map = new esri.Map("map");
            //var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
            //map.addLayer(layer);

            var mapDeferred = esri.arcgis.utils.createMap("dbd1c6d52f4e447f8c01d14a691a70fe", "map", {
                mapOptions: {
                    slider: true,
                    nav: false,
                    wrapAround180: true
                }
            });
            mapDeferred.then(function (response) {
                map = response.map;
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
                dojo.connect(map, "onClick", function (evt) {
                    var point = evt.mapPoint;
                    var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
                    var graphic = new esri.Graphic(point, symbol);
                    map.graphics.clear();
                    map.graphics.add(graphic);
                });

            });
        }

        dojo.addOnLoad(init);

     </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
     </div>
    </div>
  </body>

</html>
